<template>
	<view class="page-container">
		<!-- 顶部导航栏-->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navbar-left">
				<navigator url="/pages/index/index" open-type="switchTab" class="back-button">
					<view class="back-content">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="navbar-title">税务申报</text>
					</view>
				</navigator>
			</view>
			<view slot="right" class="navbar-right">
				<view class="nav-icon-btn" @click="toggleFilterPanel">
					<u-icon color="#6b7280" name="list" size="20"></u-icon>
				</view>
				<view class="nav-icon-btn" @click="toggleSearchBar">
					<u-icon color="#6b7280" name="search" size="20"></u-icon>
				</view>
			</view>
		</u-navbar>

		<!-- 标签页导航 -->
		<view class="tab-container">
			<view class="container">
				<view class="tab-list">
					<view class="tab-item" :class="activeTab === 'all' ? 'tab-active' : ''" @click="switchTab('all')">全部
					</view>
					<view class="tab-item" :class="activeTab === 'pending' ? 'tab-active' : ''"
						@click="switchTab('pending')">待申报</view>
					<view class="tab-item" :class="activeTab === 'completed' ? 'tab-active' : ''"
						@click="switchTab('completed')">已申报</view>
					<view class="tab-item" :class="activeTab === 'failed' ? 'tab-active' : ''"
						@click="switchTab('failed')">已失败</view>
				</view>
			</view>
		</view>

		<!-- 搜索栏 (默认隐藏) -->
		<view class="search-container" :class="showSearchBar ? 'search-show' : 'search-hide'">
			<view class="container">
				<view class="search-wrap">
					<input type="text" placeholder="搜索申报表..." class="search-input" v-model="searchKeyword"
						@input="searchTaxReturns">
					<u-icon name="search" class="search-icon" color="#9ca3af" size="18"></u-icon>
					<view class="search-close" @click="toggleSearchBar">
						<u-icon name="close" color="#9ca3af" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选面板 (默认隐藏) -->
		<view class="modal-container" :class="showFilterPanel ? 'modal-show' : 'modal-hide'">
			<view class="modal-mask" @click="toggleFilterPanel"></view>
			<view class="filter-content" :class="showFilterPanel ? 'filter-slide-up' : 'filter-slide-down'">
				<view class="filter-header">
					<text class="filter-title">筛选条件</text>
					<view class="filter-close" @click="toggleFilterPanel">
						<u-icon name="close" color="#6b7280" size="18"></u-icon>
					</view>
				</view>
				<view class="filter-body">
					<view class="form-item">
						<text class="form-label">申报期间</text>
						<picker mode="date" start="2010-01-01" :end="currentYearMonth" :value="selectedPeriod"
							fields="month" @change="onPeriodChange" class="form-picker">
							<view class="picker-display">{{ selectedPeriod || '请选择期间' }}</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">申报类型</text>
						<picker mode="selector" :range="taxTypes" range-key="label" v-model="selectedTaxType"
							@change="onTaxTypeChange" class="form-picker">
							<view class="picker-display">
								{{ selectedTaxType === -1 ? '全部类型' : taxTypes[selectedTaxType].label }}
							</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">申报状态</text>
						<picker mode="selector" :range="taxStatuses" range-key="label" v-model="selectedTaxStatus"
							@change="onStatusChange" class="form-picker">
							<view class="picker-display">
								{{ selectedTaxStatus === -1 ? '全部状态' : taxStatuses[selectedTaxStatus].label }}
							</view>
						</picker>
					</view>

					<view class="form-item">
						<text class="form-label">金额范围</text>
						<view class="form-input-group">
							<input type="number" placeholder="最小值" class="form-input" v-model="minAmount">
							<input type="number" placeholder="最大值" class="form-input" v-model="maxAmount">
						</view>
					</view>

					<view class="form-actions">
						<view class="btn-cancel" @click="resetFilters">重置</view>
						<view class="btn-submit" @click="applyFilters">确定</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="content-container">
			<!-- 快捷操作 -->
			<view class="action-group">
				<navigator url="/pageNew/pages/tax/add-tax" class="action-card">
					<view class="action-icon action-icon-add">
						<u-icon name="plus-circle-fill" size="20"></u-icon>
					</view>
					<text class="action-text">新增申报</text>
				</navigator>
				<view class="action-card" @click="batchSubmit">
					<view class="action-icon action-icon-submit">
						<u-icon name="play-right" size="20"></u-icon>
					</view>
					<text class="action-text">批量申报</text>
				</view>
				<view class="action-card" @click="exportTaxReturns">
					<view class="action-icon action-icon-export">
						<u-icon name="attach" size="20"></u-icon>
					</view>
					<text class="action-text">导出报表</text>
				</view>
				<view class="action-card" @click="showTaxCalendar">
					<view class="action-icon action-icon-calendar">
						<u-icon name="calendar" size="20"></u-icon>
					</view>
					<text class="action-text">申报日历</text>
				</view>
			</view>

			<!-- 税务申报列表 -->
			<view class="tax-list" v-if="filteredTaxReturns.length > 0">
				<view class="tax-card" v-for="(taxReturn, index) in filteredTaxReturns" :key="index">
					<view class="tax-header">
						<view class="tax-info">
							<view class="tax-icon">
								<u-icon name="file-text" size="20"></u-icon>
							</view>
							<view class="tax-details">
								<text class="tax-type">{{ getTaxTypeText(taxReturn.type) }}</text>
								<text class="tax-meta">{{ taxReturn.period }} | 申报截止: {{ taxReturn.dueDate }}</text>
							</view>
						</view>
						<text class="tax-status"
							:class="[getStatusClass(taxReturn.status)]">{{ getStatusText(taxReturn.status) }}</text>
					</view>
					<view class="tax-meta-group">
						<view class="meta-item"><text class="meta-label">申报编号: </text><text
								class="meta-value">{{ taxReturn.returnNo }}</text></view>
						<view class="meta-item"><text class="meta-label">申报日期: </text><text
								class="meta-value">{{ taxReturn.submitDate || '未申报' }}</text></view>
						<view class="meta-item"><text class="meta-label">应缴税额: </text><text
								class="meta-value font-medium">¥{{ formatCurrency(taxReturn.amount) }}</text></view>
					</view>
					<view class="tax-actions">
						<view class="tax-btn-view" @click="viewTaxReturn(taxReturn.id)">查看</view>
						<view
							:class="(taxReturn.status === 'pending' || taxReturn.status === 'failed') ? 'tax-btn-submit' : 'tax-btn-archive'"
							@click="handleTaxAction(taxReturn.id, taxReturn.status)">
							{{ taxReturn.status === 'pending' ? '申报' : taxReturn.status === 'failed' ? '重新申报' : '归档' }}
						</view>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="no-data" v-else>
				<view class="no-data-icon">
					<u-icon name="file-text" size="32"></u-icon>
				</view>
				<text class="no-data-title">暂无税务申报记录</text>
				<text class="no-data-desc">点击下方按钮添加第一条税务申报</text>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="container">
				<view class="bottom-wrap">
					<view class="total-count">
						<text class="count-text">总计: <text class="count-num">{{ filteredTaxReturns.length }}</text>
							条申报</text>
					</view>
					<navigator url="/pageNew/pages/tax/add-tax" class="bottom-add">
						<u-icon name="plus" size="16" class="add-icon"></u-icon>
						<text class="add-text">新增申报</text>
					</navigator>
				</view>
			</view>
		</view>

		<!-- 税务操作确认弹窗 -->
		<view class="modal-container-center" :class="showActionModal ? 'modal-show' : 'modal-hide'">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">{{ actionType === 'submit' ? '确认申报' : '确认归档' }}</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">
						{{ actionType === 'submit' ? '您确定要提交这张申报表吗？提交后将无法修改。' : '您确定要归档这张申报表吗？' }}
					</text>
					<input type="hidden" v-model="currentTaxId" class="modal-hidden-input">
				</view>
				<view class="modal-footer">
					<view class="btn-cancel" @click="toggleActionModal">取消</view>
					<view :class="actionType === 'submit' ? 'btn-secondary' : 'btn-submit'" @click="confirmTaxAction">
						{{ actionType === 'submit' ? '申报' : '归档' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签页状态
				activeTab: 'all',

				// 搜索状态
				showSearchBar: false,
				searchKeyword: '',

				// 筛选状态
				showFilterPanel: false,
				selectedPeriod: '',
				currentDate: this.formatDate(new Date()),
				currentYearMonth: this.formatYearMonth(new Date()),
				minAmount: '',
				maxAmount: '',

				// 税种和状态
				taxTypes: [{
						value: 'vat',
						label: '增值税'
					},
					{
						value: 'income',
						label: '企业所得税'
					},
					{
						value: 'personal',
						label: '个人所得税'
					},
					{
						value: 'stamp',
						label: '印花税'
					},
					{
						value: 'other',
						label: '其他税种'
					}
				],
				taxStatuses: [{
						value: 'pending',
						label: '待申报'
					},
					{
						value: 'completed',
						label: '已申报'
					},
					{
						value: 'failed',
						label: '已失败'
					},
					{
						value: 'archived',
						label: '已归档'
					}
				],
				selectedTaxType: -1,
				selectedTaxStatus: -1,

				// 税务申报数据
				taxReturns: [{
						id: '1',
						type: 'vat',
						returnNo: 'TZ2024100001',
						period: '2024-10',
						dueDate: '2024-11-15',
						amount: 3500.00,
						status: 'pending',
						createdAt: '2024-10-31T10:00:00',
						submitDate: '',
						remarks: '10月份增值税申报'
					},
					{
						id: '2',
						type: 'income',
						returnNo: 'TZ2024100002',
						period: '2024-10',
						dueDate: '2024-11-15',
						amount: 8000.00,
						status: 'pending',
						createdAt: '2024-10-31T10:00:00',
						submitDate: '',
						remarks: '10月份企业所得税申报'
					},
					{
						id: '3',
						type: 'personal',
						returnNo: 'TZ2024100003',
						period: '2024-10',
						dueDate: '2024-11-15',
						amount: 2500.00,
						status: 'pending',
						createdAt: '2024-10-31T10:00:00',
						submitDate: '',
						remarks: '10月份个人所得税申报'
					},
					{
						id: '4',
						type: 'vat',
						returnNo: 'TZ2024090001',
						period: '2024-09',
						dueDate: '2024-10-24',
						amount: 3200.00,
						status: 'completed',
						createdAt: '2024-09-30T10:00:00',
						submitDate: '2024-10-10T14:30:00',
						remarks: '9月份增值税申报'
					},
					{
						id: '5',
						type: 'income',
						returnNo: 'TZ2024090002',
						period: '2024-09',
						dueDate: '2024-10-24',
						amount: 7500.00,
						status: 'completed',
						createdAt: '2024-09-30T10:00:00',
						submitDate: '2024-10-10T14:30:00',
						remarks: '9月份企业所得税申报'
					},
					{
						id: '6',
						type: 'stamp',
						returnNo: 'TZ2024090003',
						period: '2024-09',
						dueDate: '2024-10-24',
						amount: 500.00,
						status: 'failed',
						createdAt: '2024-09-30T10:00:00',
						submitDate: '2024-10-24T16:45:00',
						remarks: '9月份印花税申报，申报失败，需要重新提交'
					}
				],
				filteredTaxReturns: [],

				// 税务操作确认弹窗
				showActionModal: false,
				currentTaxId: '',
				actionType: 'submit' // 'submit' 或 'archive'
			};
		},
		onLoad() {
			console.log('税务申报页面加载完成');
			this.filteredTaxReturns = [...this.taxReturns];
			this.sortTaxReturnsByDate();
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				this.activeTab = tab;
				this.filterTaxReturns();
			},

			// 显示/隐藏搜索栏
			toggleSearchBar() {
				this.showSearchBar = !this.showSearchBar;
				if (this.showSearchBar) {
					this.searchKeyword = '';
				}
			},

			// 搜索税务申报
			searchTaxReturns() {
				if (!this.searchKeyword) {
					this.filteredTaxReturns = [...this.taxReturns];
					this.filterTaxReturns();
					return;
				}

				const keyword = this.searchKeyword.toLowerCase();
				this.filteredTaxReturns = this.taxReturns.filter(taxReturn =>
					taxReturn.returnNo.toLowerCase().includes(keyword) ||
					taxReturn.period.includes(keyword) ||
					taxReturn.dueDate.includes(keyword) ||
					this.getTaxTypeText(taxReturn.type).toLowerCase().includes(keyword)
				);

				this.filterTaxReturns();
			},

			// 显示/隐藏筛选面板
			toggleFilterPanel() {
				this.showFilterPanel = !this.showFilterPanel;
			},

			// 申报期间变更
			onPeriodChange(e) {
				this.selectedPeriod = e.detail.value;
			},

			// 税种变更
			onTaxTypeChange(e) {
				this.selectedTaxType = e.detail.value;
			},

			// 状态变更
			onStatusChange(e) {
				this.selectedTaxStatus = e.detail.value;
			},

			// 重置筛选条件
			resetFilters() {
				this.selectedPeriod = '';
				this.selectedTaxType = -1;
				this.selectedTaxStatus = -1;
				this.minAmount = '';
				this.maxAmount = '';
				this.filterTaxReturns();
			},

			// 应用筛选条件
			applyFilters() {
				this.filterTaxReturns();
				this.toggleFilterPanel();
			},

			// 筛选税务申报
			filterTaxReturns() {
				let filtered = [...this.taxReturns];

				// 根据标签标签页筛选
				if (this.activeTab !== 'all') {
					filtered = filtered.filter(taxReturn => taxReturn.status === this.activeTab);
				}

				// 根据申报期间筛选
				if (this.selectedPeriod) {
					filtered = filtered.filter(taxReturn => taxReturn.period === this.selectedPeriod);
				}

				// 根据税种筛选
				if (this.selectedTaxType !== -1) {
					const type = this.taxTypes[this.selectedTaxType].value;
					filtered = filtered.filter(taxReturn => taxReturn.type === type);
				}

				// 根据状态筛选
				if (this.selectedTaxStatus !== -1) {
					const status = this.taxStatuses[this.selectedTaxStatus].value;
					filtered = filtered.filter(taxReturn => taxReturn.status === status);
				}

				// 根据金额范围筛选
				if (this.minAmount) {
					filtered = filtered.filter(taxReturn => taxReturn.amount >= this.minAmount);
				}

				if (this.maxAmount) {
					filtered = filtered.filter(taxReturn => taxReturn.amount <= this.maxAmount);
				}

				this.filteredTaxReturns = filtered;
				this.sortTaxReturnsByDate();
			},

			// 按日期排序
			sortTaxReturnsByDate() {
				this.filteredTaxReturns.sort((a, b) => {
					// 先按期间降序排序
					if (a.period !== b.period) {
						return b.period.localeCompare(a.period);
					}

					// 再按税种升序排序
					return a.type.localeCompare(b.type);
				});
			},

			// 获取税种文本
			getTaxTypeText(type) {
				const typeMap = {
					'vat': '增值税',
					'income': '企业所得税',
					'personal': '个人所得税',
					'stamp': '印花税',
					'other': '其他税种'
				};

				return typeMap[type] || type;
			},

			// 获取申报状态文本
			getStatusText(status) {
				const statusMap = {
					'pending': '待申报',
					'completed': '已申报',
					'failed': '已失败',
					'archived': '已归档'
				};

				return statusMap[status] || status;
			},

			// 获取申报状态样式
			getStatusClass(status) {
				switch (status) {
					case 'pending':
						return 'status-pending';
					case 'completed':
						return 'status-completed';
					case 'failed':
						return 'status-failed';
					case 'archived':
						return 'status-archived';
					default:
						return 'status-default';
				}
			},

			// 格式化货币
			formatCurrency(amount) {
				return parseFloat(amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
			},

			// 格式化日期
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 格式化年月
			formatYearMonth(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');

				return `${year}-${month}`;
			},

			// 查看税务申报
			viewTaxReturn(id) {
				uni.navigateTo({
					url: `/pageNew/pages/tax/view?id=${id}`
				});
			},

			// 处理税务操作
			handleTaxAction(id, status) {
				this.currentTaxId = id;

				if (status === 'pending' || status === 'failed') {
					this.actionType = 'submit';
				} else {
					this.actionType = 'archive';
				}

				this.showActionModal = true;
			},

			// 确认税务操作
			confirmTaxAction() {
				const index = this.taxReturns.findIndex(taxReturn => taxReturn.id === this.currentTaxId);
				if (index !== -1) {
					if (this.actionType === 'submit') {
						this.taxReturns[index].status = 'completed';
						this.taxReturns[index].submitDate = new Date().toISOString().split('T')[0];
					} else {
						this.taxReturns[index].status = 'archived';
					}

					// 更新筛选后的列表
					const filterIndex = this.filteredTaxReturns.findIndex(taxReturn => taxReturn.id === this.currentTaxId);
					if (filterIndex !== -1) {
						if (this.actionType === 'submit') {
							this.filteredTaxReturns[filterIndex].status = 'completed';
							this.filteredTaxReturns[filterIndex].submitDate = new Date().toISOString().split('T')[0];
						} else {
							this.filteredTaxReturns[filterIndex].status = 'archived';
						}
					}
				}

				this.showActionModal = false;

				uni.showToast({
					title: this.actionType === 'submit' ? '税务申报成功' : '税务归档成功',
					icon: 'success'
				});
			},

			// 关闭操作弹窗
			toggleActionModal() {
				this.showActionModal = false;
			},

			// 批量申报
			batchSubmit() {
				const pendingReturns = this.filteredTaxReturns.filter(taxReturn => taxReturn.status === 'pending' ||
					taxReturn.status === 'failed');

				if (pendingReturns.length === 0) {
					uni.showToast({
						title: '没有待申报的税务记录',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认批量申报',
					content: `确定要申报选中的 ${pendingReturns.length} 条税务记录吗？提交后将无法修改。`,
					success: (res) => {
						if (res.confirm) {
							pendingReturns.forEach(taxReturn => {
								const index = this.taxReturns.findIndex(t => t.id === taxReturn.id);
								if (index !== -1) {
									this.taxReturns[index].status = 'completed';
									this.taxReturns[index].submitDate = new Date().toISOString().split(
										'T')[0];
								}
							});

							// 重新筛选列表
							this.filterTaxReturns();

							uni.showToast({
								title: `成功申报 ${pendingReturns.length} 条税务记录`,
								icon: 'success'
							});
						}
					}
				});
			},

			// 导出税务报表
			exportTaxReturns() {
				const returnsToExport = [...this.filteredTaxReturns];

				if (returnsToExport.length === 0) {
					uni.showToast({
						title: '没有可导出的税务记录',
						icon: 'none'
					});
					return;
				}

				uni.showToast({
					title: `正在导出 ${returnsToExport.length} 条税务记录`,
					icon: 'loading',
					duration: 2000
				});

				setTimeout(() => {
					uni.showToast({
						title: '税务报表导出成功',
						icon: 'success'
					});
				}, 2000);
			},

			// 显示申报日历
			showTaxCalendar() {
				uni.navigateTo({
					url: '/pageNew/pages/tax/calendar'
				});
			}
		}
	};
</script>

<style scoped>
	/* 全局容器 */
	.page-container {
		min-height: 100vh;
		background-color: #f9fafb;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* 导航栏样式 */
	.navbar-left {
		display: flex;
		align-items: center;
	}

	.navbar-right {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-right: 8px;
	}

	.back-navigator {
		display: flex;
		align-items: center;
	}

	.back-content {
		display: flex;
		align-items: center;
	}

	.navbar-title {
		font-size: 16px;
		font-weight: 600;
		color: #1e88e5;
		margin-left: 8px;
	}

	.nav-icon-btn {
		background: transparent;
		border: none;
		padding: 4px;
	}

	/* 标签页样式 */
	.tab-container {
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
	}

	.tab-list {
		display: flex;
		border-bottom: 1px solid #e5e7eb;
	}

	.tab-item {
		flex: 1;
		padding: 12px 0;
		font-size: 14px;
		background: transparent;
		border: none;
		color: #6b7280;
	}

	.tab-active {
		color: #1e88e5;
		font-weight: 500;
		border-bottom: 2px solid #1e88e5;
	}

	/* 搜索栏样式 */
	.search-container {
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		padding: 8px 0;
		transition: all 0.3s ease;
	}

	.search-show {
		display: block;
	}

	.search-hide {
		display: none;
	}

	.search-wrap {
		position: relative;
	}

	.search-input {
		width: 100%;
		padding: 10px 12px 10px 36px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
	}

	.search-icon {
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
	}

	.search-close {
		position: absolute;
		right: 12px;
		top: 50%;
		transform: translateY(-50%);
		background: transparent;
		border: none;
	}

	/* 筛选面板样式 */
	.modal-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
	}

	.modal-show {
		display: flex;
		flex-direction: column;
	}

	.modal-hide {
		display: none;
	}

	.modal-mask {
		flex: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.filter-content {
		background-color: #ffffff;
		width: 100%;
		height: 60vh;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		overflow-y: auto;
		transition: transform 0.3s ease;
	}

	.filter-slide-up {
		transform: translateY(0);
	}

	.filter-slide-down {
		transform: translateY(100%);
	}

	.filter-header {
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e5e7eb;
	}

	.filter-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.filter-close {
		background: transparent;
		border: none;
	}

	.filter-body {
		padding: 16px;
	}

	/* 表单样式 */
	.form-item {
		margin-bottom: 16px;
	}

	.form-label {
		display: block;
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 6px;
	}

	.form-picker {
		width: 100%;
	}

	.picker-display {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
		color: #1f2937;
	}

	.form-input-group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.form-input {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
		font-size: 14px;
	}

	.form-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		padding-top: 16px;
	}

	/* 主内容区样式 */
	.content-container {
		/* width: 100%;
		max-width: 750rpx; */
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 84px;
	}

	/* 快捷操作样式 */
	.action-group {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		margin-bottom: 16px;
	}

	.action-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px 8px;
		transition: all 0.3s ease;
	}

	.action-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	.action-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
	}

	.action-icon-add {
		background-color: #E3F2FD;
		color: #1e88e5;
	}

	.action-icon-submit {
		background-color: #E8F5E9;
		color: #4CAF50;
	}

	.action-icon-export {
		background-color: #FFF3E0;
		color: #FF9800;
	}

	.action-icon-calendar {
		background-color: #E3F2FD;
		color: #1e88e5;
	}

	.action-text {
		font-size: 12px;
		color: #1f2937;
	}

	/* 税务申报列表样式 */
	.tax-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.tax-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 16px;
	}

	.tax-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.tax-info {
		display: flex;
		align-items: center;
	}

	.tax-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #E3F2FD;
		color: #1e88e5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
	}

	.tax-details {
		display: flex;
		flex-direction: column;
	}

	.tax-type {
		font-size: 14px;
		font-weight: 500;
		color: #1f2937;
	}

	.tax-meta {
		font-size: 12px;
		color: #6b7280;
		margin-top: 2px;
	}

	.tax-status {
		padding: 2px 8px;
		border-radius: 999px;
		font-size: 12px;
	}

	.status-pending {
		background-color: rgba(255, 152, 0, 0.1);
		color: #FF9800;
	}

	.status-completed {
		background-color: rgba(76, 175, 80, 0.1);
		color: #4CAF50;
	}

	.status-failed {
		background-color: rgba(244, 67, 54, 0.1);
		color: #F44336;
	}

	.status-archived {
		background-color: rgba(30, 136, 229, 0.1);
		color: #1e88e5;
	}

	.status-default {
		background-color: #f3f4f6;
		color: #6b7280;
	}

	/* 税务申报元数据样式 */
	.tax-meta-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 16px;
		font-size: 12px;
		margin-top: 12px;
	}

	.meta-item {
		color: #6b7280;
	}

	.meta-label {
		color: #6b7280;
	}

	.meta-value {
		color: #1f2937;
	}

	/* 税务申报操作按钮 */
	.tax-actions {
		display: flex;
		justify-content: flex-end;
		gap: 12px;
		margin-top: 12px;
	}

	.tax-btn-view {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #1e88e5;
		padding: 4px 0;
	}

	.tax-btn-submit {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #4CAF50;
		padding: 4px 0;
	}

	.tax-btn-archive {
		background: transparent;
		border: none;
		font-size: 12px;
		color: #9ca3af;
		padding: 4px 0;
	}

	/* 无数据样式 */
	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 48px 0;
	}

	.no-data-icon {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		background-color: #f3f4f6;
		color: #9ca3af;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
	}

	.no-data-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
		margin-bottom: 8px;
	}

	.no-data-desc {
		font-size: 14px;
		color: #6b7280;
		text-align: center;
		margin-bottom: 24px;
	}

	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 12px 0;
	}

	.bottom-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total-count {
		font-size: 12px;
		color: #6b7280;
	}

	.count-num {
		color: #1e88e5;
		font-weight: 500;
	}

	.bottom-add {
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
		display: flex;
		align-items: center;
	}

	.add-icon {
		margin-right: 8px;
	}

	.add-text {
		font-size: 14px;
	}

	/* 居中弹窗容器 */
	.modal-container-center {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: none;
		/* 默认隐藏 */
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗显示状态 */
	.modal-container-center.modal-show {
		display: flex;
	}

	/* 弹窗隐藏状态 */
	.modal-container-center.modal-hide {
		display: none;
	}

	/* 弹窗样式 */
	.modal-content {
		background-color: #ffffff;
		border-radius: 8px;
		width: 100%;
		max-width: 320px;
		margin: 0 16px;
	}

	.modal-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.modal-title {
		font-size: 16px;
		font-weight: 500;
		color: #1f2937;
	}

	.modal-body {
		padding: 16px;
	}

	.modal-text {
		font-size: 14px;
		color: #374151;
		line-height: 1.5;
	}

	.modal-hidden-input {
		display: none;
	}

	.modal-footer {
		padding: 12px 16px;
		border-top: 1px solid #e5e7eb;
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	/* 按钮样式 */
	.btn-submit {
		background-color: #1e88e5;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	.btn-secondary {
		background-color: #4CAF50;
		color: #ffffff;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	.btn-cancel {
		background-color: #e5e7eb;
		color: #374151;
		border-radius: 6px;
		padding: 8px 16px;
		font-size: 14px;
		border: none;
	}

	/* 工具类 */
	.container {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 0 16px;
	}
</style>